{% if not params.refresh %}
  <div id="{{ params.datatableName }}_main_div">
{% endif %}

{% if params.showAddButton %}
  <div style="float:right;margin-bottom:10px;">
    {{ params.ui.button({
      text: 'Add row',
      type: 'add',
      onclick: "#{params.datatableName}_add_row()"
    }).render()|raw }}
  </div>
{% endif %}

<table id="{{ params.datatableName }}" class="display" style="width:100%;"></table>

{% if not params.refresh %}
  </div>
{% endif %}

<script>
  {% if not params.refresh %}
    function {{ params.datatableName }}_refresh() {
      _ajax_update(
        "{{ params.refreshAction }}",
        {
          uid: "{{ params.datatableName }}"
        },
        "{{ params.datatableName }}_main_div"
      );
    }

    function {{ params.datatableName}}_update(id, colName, newValue) {
      _ajax_read(
        "{{ params.updateAction }}",
        {
          uid: "{{ params.datatableName }}",
          id: id,
          colName: colName,
          newValue: newValue
        },
        (res) => {
          if (isNaN(res)) {
            alert(res);
          } else {
            {{ params.datatableName }}_refresh();
          }
        }
      );
    }

    function {{ params.datatableName }}_add_row() {
      _ajax_read(
        "UI/DataTable/AddRow", 
        {
          uid: "{{ params.datatableName }}"
        }, 
        (res) => {
          if (isNaN(res)) {
            alert(res);
          } else {
            {{ params.datatableName }}_refresh();
          };
        }
      );
    }

    function {{ params.datatableName }}_delete_row(_this) {
      let idRecordToDelete = $(_this).closest('tr').attr('id-record');

      _confirm('Are you sure to delete this record?', {}, function() {
        _ajax_read(
          'UI/DataTable/Delete', 
          {
            uid: "{{ params.datatableName }}",
            id: idRecordToDelete,
          }, 
          (res) => {
            if (isNaN(res)) {
              alert(res);
            } else {
              {{ params.datatableName }}_refresh();
            };
          }
        );
      });
    }

    var columns = {{ params.columns|json_encode|raw }};
    
    var editorFunctions = [];
    var colDefinition = {};
    var colName = "";
    {% for colDefinition in params.columns %}
      colDefinition = {{ colDefinition|json_encode|raw }};

      {%set colName = colDefinition.data %}; 
      colName = colDefinition.data;

      if (typeof colName != "undefined" && colDefinition.adiosColumn.type != "boolean") {
        let tmpEditableEnumData = colDefinition.adiosColumn.enumValues;

        function {{ params.datatableName }}_init_editor_{{ colName }}() {
          let {{ params.datatableName }}_editorSettings_{{ colName }} = {
            type: "{{ colDefinition.editorType }}",
            placeholder: "{{ params.placeholder }}",
            tooltip: "{{ params.tooltip }}",
            cssclass: "datatable-form-control"
          };

          if ("{{ colDefinition.editorType }}" == "select") {
            {{ params.datatableName }}_editorSettings_{{ colName }}.data = tmpEditableEnumData;
          }

          {{ params.datatableName }}.$('td[col-name={{ colName }}]').editable(function(value, settings) {
            {{ params.datatableName}}_update(
              $(this).closest('tr').attr('id-record'), 
              $(this).closest('td').attr('col-name'), 
              value
            );

            return(value);
          }, {{ params.datatableName }}_editorSettings_{{ colName }});
        };

        editorFunctions.push("{{ params.datatableName }}_init_editor_{{ colName }}");
      }
    {% endfor %}
  {% endif %}

  var {{ params.datatableName }} = $("#{{ params.datatableName }}").DataTable({
    columns: columns,
    ajax: "{{ params.loadDataActionFullUrl }}",
    proccessing: true,
    serverSide: true,
    pageLength: {{ params.itemsPerPage }},
    displayStart: {{ params.displayStart }},
    oSearch: {"sSearch": "{{ params.search }}"},
    fnDrawCallback: () => {
      editorFunctions.forEach((fnName) => {
        let fn = window[fnName];
        fn();
      })
    },
    createdRow: function(row, data, dataIndex) {
      $(row).attr('id', "{{ params.datatableName }}_" + data.id);
      $(row).attr('id-record', data.id);

      $.each($('td', row), function (colIndex) {
        if (
          data[columns[colIndex]['data']] == null
          || data[columns[colIndex]['data']] == ""
        ) {
          $(this).addClass('dt-empty-td');
        }

        $(this).attr('col-name', columns[colIndex]['data']);
      });
    }
  });
</script>